<template>
  <div >
<Dog4
v-for="(item,index) in arr"
:key="index"
:dogImgUrl='item.dogImgUrl'
:dogName="item.dogName"
@harry='Fn'
/>
<hr>
<p>喜欢的狗</p>
<ul>
  <li v-for="(item,index) in loveArr "  :key="index">{{item}}</li>
</ul>
  </div>
</template>

<script>
import Dog4 from './components/Dog4.vue'
export default {
data () {
  return {
    arr:[
    {
        dogImgUrl:
        "https://img0.baidu.com/it/u=787131192,551659962&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1663952400&t=074f6c09df28f78ac669195bde195ec7",
        dogName: "博美",
    },
    {
        dogImgUrl:
        "http://dlj.bz/0Tfeys",
        dogName: "泰迪",
    },
    {
        dogImgUrl:
        "https://img2.baidu.com/it/u=4117624560,3955118638&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727",
        dogName: "金毛",
    },
    {
        dogImgUrl:
        "http://dlj.bz/x9NNd2",
        dogName: "哈士奇",
    },
    {
        dogImgUrl:
        "http://dlj.bz/iLXzYA",
        dogName: "阿拉斯加",
    },
    {
        dogImgUrl:
        "http://dlj.bz/8AsCJU",
        dogName: "萨摩耶",
    },
],
 loveArr: []
  };
},
components: {
  Dog4
},
 methods: {
    Fn(dogName) {
      this.loveArr.push(dogName)
    },
  },
}
</script>

<style>

</style>